<template>
  <common-echarts :option="option" ref="echarts" :height="600"></common-echarts>
</template>

<script>
import CommonEcharts from "./echarts.vue";

export default {
  name: "SankeyEcharts",
  components: {
    CommonEcharts,
  },
  computed: {
    option() {
      let series = [
        {
          name: "A和B所占权重",
          type: "treemap",
          data: [
            {
              name: "A",
              value: 10,
              children: [
                { name: "A1", value: 4 },
                {
                  name: "A2",
                  value: 6,
                  children: [
                    { name: "A21", value: 3 },
                    { name: "A22", value: 2 },
                    { name: "A23", value: 1 },
                  ],
                },
              ],
            },
            {
              name: "B",
              value: 20,
              children: [
                { name: "B1", value: 15 },
                { name: "B2", value: 5 },
              ],
            },
          ],
        },
      ];

      return {
        title: {
          text: "数据的层级以及权重关系",
          subtext: "矩形树图",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br />{b}: {c}",
        },
        legend: {
          data: ["A", "B"],
        },
        series: series,
      };
    },
  },
  data() {
    return {};
  },
  methods: {
    refresh() {
      console.log("option:", this.option);
      this.$nextTick(this.$refs.echarts.refresh);
    },
  },
};
</script>
